<template>
    <div class="app">
        <div class="siteDatil-head_box">
            <!-- div class="complete-info_box" v-if="isMy&&detail.complete!=100"  @click="completeInfo">
                <div v-if="!$util.isEmpty(detail)">信息完善 {{(detail.complete?detail.complete:0) + '%'}}</div>
                <div class="complete_right">去完善</div>
            </!-->
            <div
				v-if="!$util.isEmpty(detail)"
				:class="['complete-open_box',(isMy&&detail.complete!=100)?'':'complete-open_pd']" >
                <div class="complete-open_left">
                    <div class="open_item">
                        浏览 {{ detail.view_num}}
                    </div>
                    <div :class="['open_item',detail.praised_current_site==0?'':'praised']" @click="give">
                        点赞 {{detail.praise_num}}
                    </div>
                </div>
                <div class="complete-open_right" v-if="isMy">
                    <div class="open_item" @click="changeImg">
                        点击更换封面
                    </div>
                </div>
            </div>
            <div
				class="comlete-info_box"
				v-if="!$util.isEmpty(detail)"
				>
                <div class="address">{{detail.short_address}}</div>
                <div class="address_detail">{{detail.full_address}}</div>
                <div class="address_detail">全包{{detail.budget}}万 &nbsp; |&nbsp;{{detail.building_area}}m²&nbsp; |&nbsp;{{detail.house_structure}}&nbsp; |&nbsp;{{detail.decorate_style_name}}</div>
            </div>
            <img v-if="$util.isEmpty(form.cover)"  class="head_bg" :src="`${`${constant.imgUrl}common/default_detail_img.png`}?x-oss-process=image/resize,m_fill,h_720,w_1125` " alt="封面图片">
			<img v-else class="head_bg" :src="form.cover" alt="封面图片">
        </div>
		<div class="personal_bar">
			<div class="left">
				<div class="avatar">
					<img v-if="userInfo.owner_user_picture" :src="userInfo.owner_user_picture" alt="">
				</div>
				<div class="text_box">
					<p class="name">{{userInfo.owner_user_name}}</p><p class="info">{{userInfo.owner_user_region_name}}&nbsp;|&nbsp;{{userInfo.owner_user_role_name}}</p>
				</div>
			</div>
			<div class="right" @click="toHomePage">主页</div>
		</div>
        <AppHeaderNav
			isFixed
			v-model="active"
			:navTab="navTab" />
        <div class="cut-list_box">
            <Live v-if="active == 0" ref="live" :detail="detail"></Live>
            <Team v-if="active == 1" ref="team"></Team>
        </div>
        <div
            v-if="active == 1&&isMy"
            @click="addTeam"
            class="app-footer add-members">
            <text class="iconfont iconicon-test"/>添加成员
        </div>
        <div
             v-if="active == 0 && isMy"
            class="live-bottom_fixed">
            <div class="live-bottom_box">
                <div>
                    <i class="iconfont icongengxin" @click="updateItem">
                        <span>更新</span>
                    </i>
                </div>
                <div>
                    <i class="iconfont iconfenxiang" @click="shareBtnFn(detail)">
                        <span>分享</span>
                    </i>
                </div>
                <div @click="set">
                   <i class="iconfont iconshezhi">
                        <span>设置</span>
                    </i>
                </div>
            </div>
        </div>
        <!-- 设置 -->
        <uniPop type="bottom" ref="setShow" maxHeight="100vh" width="100%">
            <div class="pop-set_box">
                <appCell title="修改项目" @click.native="completeInfo" />
                <appCell title="装修阶段" @click.native="selectStatus" />
                <appCell title="添加成员"  @click.native="addTeam" />
                <appCell title="是否展示" :arrowsRight="false" >
                    <div slot="value" class="setSwitch">
                         <switch :checked="setSwitch" @change="onSwitchChange" color="#FFD11A" />
                    </div>
                </appCell>
                <appCell
                    title="删除"
                    :arrowsRight="false"
                    @click.native="dele" />
            </div>
        </uniPop>
        <div
             v-show="false"
        >
        <appUploader
            @chooseImage="chooseUploader"
            :multiple="false"
            ref="appUploader"
            :imgList.sync ="imgList" />
        </div>
		<!-- 分享弹窗 -->
		<!-- <uni-popup ref="popupFx" maxHeight="100vh">
			<div class="share_wrap">
				<div class="share_img">
					<img :src="sharePosterImg" alt  mode="widthFix" />
				</div>
			</div>
		</uni-popup> -->
		 <!-- v-if="active == 0 && !isMy" -->

		<footer v-if="!isMy">
			<normal-footer :isShowAttr="true" />
		</footer>
    </div>
</template>

<script>
import AppHeaderNav from '@/components/App_header_nav'
import Live from './components/live'
import Team from './components/team'
import uniPop from '@/components/uni-popup/uni-popup'
import appInputAll from '@/components/app_input_all'
import appCell from '@/components/app_cell'
import appUploader from '../../components/App_uploader'
import qs from 'qs'
import { getPoster } from '@/api/article/construciton'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import { getBasicUser } from '@/utils/auth'
import normalFooter from '@/pages/components/normalFooter'
import {
	getFitmentDetail,
	getSiteReport,
	getFitmentStyle,
	modifySite,
	modifySiteCover,
	putOn,
	delSite,
	putOff,
	addSiteTeam,
	praiseSite,
	cancelPraiseSite,
	editStageSiteId
} from '@/api/constructionSite/index'
export default {
	name: 'siteDetail',
	components: {
		AppHeaderNav,
		Live,
		Team,
		uniPop,
		appInputAll,
		appCell,
		appUploader,
		uniPopup,
		normalFooter
	},
	computed: {
		isMy() {
			return this.$util.isEmpty(this.detail) ? false : this.detail.is_my == 1
		}
	},

	provide() {
		return {
			queryData: this.queryData
		}
	},
	data() {
		return {
			setSwitch: true,
			navTab: [{ value: '', text: '装修情况' }, { value: '', text: '团队' }],
			form: {
				site_info_id: '',
				cover: '',
				name: '',
				item_no: '',
				current_stage_id: '',
				house_no: '',
				house_style_room: '', // 房
				house_style_hall: '', // 厅
				house_style_kitchen: '', // 厨
				house_style_bathroom: '', // 卫
				budget: '',
				decorate_style: '',
				decorate_way: '',
				building_area: '',
				map_longitude: '',
				map_latitude: '',
				short_address: '',
				full_address: '',
				house_type: '',
				house_remark: ''
			},
			detail: {},
			active: 0,
			imgList: [],
			query: {},
			team_id_list: [],
			sharePosterImg: '',
			oneLoad: false,
			constant: this.$constant,
			userInfo: {
				city_name: '',
				nick_name: '',
				role_name: '',
				user_picture: ''
			},
			owner_user_id: ''
		}
	},
	onShow() {
		if (this.oneLoad) {
			this.getDetail()
			this.updatedTab(true)
		}
	},
	onLoad(val) {
		console.log(val, 'detail option')
		this.owner_user_id = val.owner_user_id
		this.query = val
		if (!this.$util.isEmpty(this.query.staff)) {
			let staff = this.query.staff + ''
			let formData = JSON.parse(this.query.formData)
			this.addSiteTeam(staff.split(','), formData)
		} else if (!this.$util.isEmpty(this.query.stage_id) &&
		!this.$util.isEmpty(this.query.stage_txt)) {
			this.editStage()
		} else {
			this.getDetail()
		}
	},
	mounted() {

	},
	methods: {
		toHomePage() {
			const params = {
				owner_user_id: uni.getStorageSync('user_id')
			}
			const share_user_id = uni.getStorageSync('currentQuery').share_user_id
			if (share_user_id) {
				params.share_user_id = share_user_id
			}
			uni.navigateTo({
				url: `/pages/design/designCompany/indexNew${this.commonJS.queryData(params)}`
			})
		},
		editStage() {
			editStageSiteId({
				site_info_id: this.query.site_info_id,
				stage_id: this.query.stage_id
			}).then(res => {
				this.getDetail()
			})
		},
		updateItem() {
			let query = {
				id: this.detail.site_id,
				site_info_id: this.detail.site_info_id,
				current_stage_group_id: this.detail.current_stage_group_id,
				current_stage_id: this.detail.current_stage_id
			}
			uni.navigateTo({
				url: `/pages/constructionSite/update${this.commonJS.queryData(query)}`
			})
		},
		selectStatus() {
			const params = {
				...this.query,
				url: '/pages/constructionSite/detail',
				current_stage_group_id: this.detail.current_stage_group_id,
				stage_id: this.detail.current_stage_id,
				site_info_id: this.detail.site_info_id
			}
			uni.navigateTo({
				url: `/pages/constructionSite/selStage${this.commonJS.queryData(params)}`
			})
		},
		queryData() {
			return {
				...this.query
			}
		},
		praiseReport() {
			praiseSite({
				id: this.detail.site_id
			}).then(res => {
				this.detail.praise_num += 1
				this.detail.praised_current_site = 1
			})
		},
		cancelPraiseReport() {
			cancelPraiseSite({
				id: this.detail.site_id
			}).then(res => {
				this.detail.praise_num -= 1
				this.detail.praised_current_site = 0
			})
		},
		give() {
			if (this.detail.praised_current_site == 0) {
				this.praiseReport()
			} else {
				this.cancelPraiseReport()
			}
		},
		getDetail() {
			let form = {}
			if (!this.$util.isEmpty(this.query.share)) {
				form = {
					share: 1
				}
			}
			getFitmentDetail({
				id: this.query.id,
				...form
			}).then(res => {
				this.oneLoad = true
				this.query.share = null
				Object.keys(this.form).forEach(i => {
					this.form[i] = res.data.site_info[i]
				})
				console.log(!this.form.cover)
				this.detail = res.data.site_info
				this.setSwitch = this.detail.on_show == 1
				this.navTab = this.navTab.map((i, index) => ({
					...i,
					text: index == 1 ? ('团队' + '(' + res.data.team_num + ')') : i.text
				}))
				this.team_id_list = res.data.team_id_list
				// uni.showToast({
				// 	icon: 'none',
				// 	title: JSON.stringify(res.data.owner_user_info)
				// })
				this.userInfo = res.data.owner_user_info || {}
			})
		},
		completeInfo() {
			this.$refs.setShow.close()
			uni.navigateTo({
				url: `/pages/constructionSite/infoEdit?id=${this.query.id}&owner_user_id=${this.query.owner_user_id}`
			})
		}, // 上架
		putaway() {
			putOn({
				'site_info_id': [this.detail.site_info_id]
			}).then(res => {
				this.setSwitch = true
				uni.showToast({
					title: '操作成功',
					icon: 'none'
				})
			})
		}, // 下架
		soldOut() {
			putOff({
			  'site_id': [this.detail.site_id]
			}).then(res => {
				this.setSwitch = false
				uni.showToast({
					title: '已下架',
					icon: 'none'
				})
			})
		},
		// ==分享==
		shareBtnFn(item) {
			let params = {
				site_id: item.site_id,
				mini_page: `/pages/constructionSite/detail?id=${this.query.id}&owner_user_id=${this.query.owner_user_id}&share=1`
			}
			getPoster(params).then(res => {
				if (res.status === 'success') {
					this.sharePosterImg = res.data.poster_url
					uni.previewImage({
						current: 0,
						urls: [this.sharePosterImg],
						loop: false
					})
				}
			})
		},
		onSwitchChange(e) {
			this.setSwitch = e.detail.value
			if (this.setSwitch) {
				this.putaway()
				return
			}
			this.soldOut()
		},
		set() {
			this.$refs.setShow.open()
		},
		setSiteCover() {
			modifySiteCover({
				site_info_id: this.detail.site_info_id,
				cover: encodeURIComponent(this.imgList[0])
			})
				.then(res => {
					this.form.cover = this.imgList[0]
					this.imgList.splice(0, 1)
					uni.showToast({
						title: '更换成功',
						icon: 'none'
					})
				})
		},
		changeImg() {
			this.$refs.appUploader.chooseImage()
		},
		chooseUploader(val) {
			this.setSiteCover()
		},
		dele() {
			uni.showModal({
				title: '提示',
				content: '你确定要删除吗?',
				success: (res) => {
					if (res.confirm) {
						delSite({
							site_info_id: this.detail.site_info_id
						}).then(res => {
							// 跳转到列表页
							uni.navigateTo({
								url: `/pages/constructionSite/list?owner_user_id=${this.query.owner_user_id}`
							})
						})
					} else if (res.cancel) {
						console.log('用户点击取消')
					}
				}
			})
		},
    	addSiteTeam(listId, formData) {
			addSiteTeam({
				site_info_id: formData.site_info_id,
				relation_id: listId
			}).then(res => {
				uni.showToast({
					title: '添加成功',
					icon: 'none'
				})
				this.getDetail()
				if (this.active == 1) {
					this.$refs.team.resetList()
					this.$refs.team.init()
				}
			})
		},
		addTeam() {
			const params = {
				filter: 'team',
				tips: '去添加员工',
				isSelect: 'true',
				...this.query,
				fromPage: 'siteTeam',
				formData: JSON.stringify({
					user_id_str: this.team_id_list.join(),
					site_info_id: this.detail.site_info_id
				})
			}
			uni.navigateTo({
				url: `/pages/admin/staffManage/selectStaff?${qs.stringify(params)}`
			})
		},
		updatedTab(refresh = false) {
			// 直播
			if (this.active == 0) {
				if (refresh) {
					this.$refs.live.resetList()
				}
				if (this.$refs.live.list.data.length < this.$refs.live.list.total || this.$util.isEmpty(this.$refs.live.list.total)) {
					this.$refs.live.init().then(() => {
						uni.stopPullDownRefresh()
					})
				} else {
					uni.stopPullDownRefresh()
				}
				// 团队
			} else if (this.active == 1) {
				if (refresh) {
					this.$refs.team.resetList()
				}
				if (this.$refs.team.list.data.length < this.$refs.team.list.total || this.$util.isEmpty(this.$refs.team.list.total)) {
					this.$refs.team.init().then(() => {
						uni.stopPullDownRefresh()
					})
				} else {
					uni.stopPullDownRefresh()
				}
			}
		}
	},
	onReachBottom() {
		this.updatedTab()
	}

}
</script>

<style lang="scss" scoped>
.personal_bar {
	background-color: #fff;
	padding: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 20px solid #EEEEEE;
	.left {
		display: flex;
	}
	.avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		overflow: hidden;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.text_box {
		padding-left: 20px;
		.name {
			margin-top: 4px;
			font-size: 30px;
			color: #333;
			font-weight: 600px;
		}
		.info {
			margin-top: 20px;
			color: #999;
			font-size: 24px;
		}
	}
	p {
		line-height: 1;
	}
	.right {
		padding: 0 36px;
		height: 60px;
		line-height: 60px;
		border-radius: 60px;
		background-color: #F8D34C;
		font-size: 24px;
		color: #361D09;
	}
}
	// .share_wrap{
	// 	img	{
	// 		height: auto;
	// 	}
	// }
    .siteDatil-head_box {
        width: 100%;
        height: 480px;
        position: relative;
        & .head_bg {
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

    & .complete-info_box {
       width:100%;
       height:70px;
       background:rgba(255,245,239,.8);
       position: relative;
       z-index: 10;
       padding: 0 30px;
       display: flex;
       align-items: center;
       font-size:24px;
        font-weight:400;
        color:rgba(51,51,51,1);
        box-sizing: border-box;
        & .complete_right {
            flex: 1;
            text-align: right;
            color: #FF6900;
            padding-right: 20px;
            &::after{
                content: "";
                display: inline-block;
                width: 15px;
                height: 15px;
                border-width:2px 2px 0 0;
                border-color:#FF6900;
                border-style:solid;
                position: absolute;
                top: 50%;
                right: 30px;
                transform: translate(0,-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
            }
        }
    }
}

.complete-open_box {
    padding-left: 30px;
    padding-right: 50px;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 10;
    box-sizing: border-box;
	&.complete-open_pd {
		padding-top: 40px;
	}
    & .complete-open_left {
        display: flex;
    }
    .open_item {
        padding: 15px;
        background:rgba(0,0,0,0.4);
        font-weight:400;
        color:rgba(255,255,255,1);
        font-size: 24px;
        border-radius:25px;
        // margin-left: 10px;
		&.praised{
			color: #FF6900;
		}
    }
}
.comlete-info_box {
    color: #FFFFFF;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    padding: 0 30px;
    & .address {
        color: #FFFFFF;
        font-size:32px;
        font-weight:600;
    }
    & .address_detail {
        font-weight:400;
        font-size:24px;
        margin: 16px 0;
    }
}
    .add-members {
        background-color: #FFFFFF;
        box-shadow:0px -3px 10px 0px rgba(0, 0, 0, 0.1);
    }
     .live-bottom_fixed {
          height: 100px;
          position: fixed;
          bottom: 0;
          width: 100%;
          box-shadow:0px -3px 10px 0px rgba(0, 0, 0, 0.1);
          background-color: #FFFFFF;
          & .live-bottom_box {
              display: flex;
              height: 100%;
              color: #666666;
              & > div {
                  flex: 1;
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                    &  .iconfont {
                        & > span {
                            margin-left: 10px;
                        }
                    }
              }
          }
       }
       .pop-set_box {
           background-color: #FFFFFF;
           padding-left: 30px;
           padding-top: 10px;
       }
       .setSwitch {
           display: flex;
           justify-content: flex-end;
       }
</style>
